import React from 'react';
import { connect } from 'dva';
import { Card } from 'antd'

/**
 * 	
 * 	
 * PositionTrend 仓位走势
 * 子组件
 * PositionTrendCharts 仓位走势图表
 */
import { IECharts } from '../../../components'
const PositionTrendCharts = ({
    list = [],
    benchName = '',
    // colors = ['#5081BD', '#C26562']
    colors = ['#85aed6', '#f5a623']
}) => {
    const data = []
    list.map(item => {
        data.push({
            date: item.date,
            money: item.money,
            ratio: item.ratio
        })
    })


    const myProps = {
        option: {
            color: colors,
            tooltip: {
                trigger: 'axis',
                formatter: (params) => {
                    return `${params[0].seriesName}：${params[0].value && params[0].value.toPercent()}<br />${params[1].seriesName}：${params[1].value}`
                },
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }

            },
            grid: {
                top: '3%',
                left: '3%',
                right: '4%',
                // bottom: '3%',
                containLabel: true
            },
            legend: {
                data: ['净多比例', benchName],
                bottom: 0,
                right: 0,
                itemGap: 25,
                textStyle: {
                    // color: '#999'
                    color: '#4a4a4a'
                }

            },
            xAxis: [
                {
                    type: 'category',
                    data: data.map(item => item.date),
                    axisLabel: {
                        interval: 0,
                        rotate: 20
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#999"
                        }
                    }
                }
            ],
            yAxis: [


                {
                    type: 'value',
                    // min: 0,
                    // max: 1,
                    // interval: 0.1,
                    axisLabel: {
                        formatter: (value) => value.toPercent()
                    },
                    axisLine: {
                        lineStyle: {
                            //color: "#999"
                            color: '#4a4a4a'
                        }
                    },
                    splitLine: {     //网格线
                        show: false
                    }
                },
                {
                    type: 'value',
                    // min: 0,
                    // max: 80000,
                    // interval: 8000,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        lineStyle: {
                            // color: "#999"
                            color: '#4a4a4a'
                        }
                    },
                    splitLine: {     //网格线
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '净多比例',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: data.map(item => item.ratio),
                },

                {
                    name: benchName,
                    type: 'line',
                    yAxisIndex: 1,
                    data: data.map(item => item.money),
                }
            ]
        }
    }
    return (
        // <div style={{ height: 400, background: '#fff' }}>
        <div style={{ height: 400, background: '#fff',border:'1px solid #ddd',padding:'32px 20px 12px' }}>
            <IECharts {...myProps}  resizable={true}/>
        </div>
    )
}

import TimeRangeSelect from '../../../components/toolbar/TimeRangeSelect';

//备用函数
//fetchData  查询数据
class PositionTrend extends React.Component {
    state = {
        data: this.props.trend,
        portName: this.props.portName,
        benchName: this.props.benchName
    }

    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {

        if ((nextProps.lPortId !== this.props.lPortId) || (nextProps.cBenchCode !== this.props.cBenchCode) || (nextProps.trendBegindate !== this.props.trendBegindate) || (nextProps.trendEnddate !== this.props.trendEnddate)) {
            this.fetchData(nextProps)
        }
        if (nextProps.trend !== this.props.trend) {
            nextProps.trend.map(item => {
                // item.ratio=item.ratio.toPercent()
                item.money = Math.round(item.money).toFixed(2)
                // item[qczb.id] = item[qczb.id]&&`${item[qczb.id].toPercent()}`
                // item[qmzb.id] = item[qmzb.id]&&`${item[qmzb.id].toPercent()}`
                // item[jsq.id] = item[jsq.id]&&`${item[jsq.id]>0?'+':''}${item[jsq.id].toPercent()}`
                // item[tzjzzb.id] = item[tzjzzb.id]&&`${item[tzjzzb.id].toPercent()}`
                // item[cdp.id] = item[cdp.id]&&`${item[cdp.id].toPercent()}`
            })
            this.setState({
                data: nextProps.trend,
            })
        }
        if (nextProps.portName !== this.props.portName) {
            this.setState({
                portName: nextProps.portName,
            })
        }
        if (nextProps.benchName !== this.props.benchName) {
            this.setState({
                benchName: nextProps.benchName,
            })
        }
    }
    fetchData = (props) => {
        props.dispatch({
            type: 'combinatorialAnalysis/getPositionTrend',
            payload: props
        })
    }

    render() {

        return (
            <Card title='仓位走势' bordered={false} className="positionTrend">

                <TimeRangeSelect {...this.props} begindate={this.props.trendBegindate} enddate={this.props.trendEnddate} begindateName='trendBegindate' enddateName='trendEnddate' />
                <PositionTrendCharts
                    list={this.state.data}
                    benchName={this.state.benchName}
                    portName={this.state.portName}
                />

            </Card>
        );
    }
}

PositionTrend.defaultProps = {
    lPortId: null,
    cBenchCode: null,
    trendBegindate: null,//仓位走势 开始时间
    trendEnddate: null,//仓位走势 结束时间,
    portName: '',
    benchName: '',
    trend: [
        {
            "id": 1,
            "date": "2018-02-14",
            "money": 123400,
            "ratio": 0.45
        }
    ]
}
export default connect()(PositionTrend)